<template>
        <div id="example">
        <select v-model="prov">
            <option v-for="(option,index) in arr" :key="index" :value="option.name">
                {{ option.name }}
            </option>
        </select>
        <select v-model="city">
            <option v-for="(option,index) in cityArr" :key="index" :value="option.name">
                {{ option.name }}
            </option>
        </select>
        <select v-model="district" v-if="district">
            <option v-for="(option,index) in districtArr" :key="index" :value="option.name">
                {{ option.name }}
            </option>
        </select>
    </div>
</template>
<style  scoped>
#example{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
select{
	width: 30%;
}
</style>
<script>
import arrAll from "../assets/city.json"
export default {
	props:["sheng","shi","qu"],
	data() {
       return {
		arr: arrAll.selectProv,
		prov: this.sheng||'北京',
		city: this.shi||'北京',
		district: this.qu||'东城区',
		cityArr: [],
		districtArr: []
	}},
	methods: {
		updateCity: function () {
			for (var i in this.arr) {
				var obj = this.arr[i];
				if (obj.name == this.prov) {
					this.cityArr = obj.sub;
					break;
				}
			}
			this.city = this.cityArr[1].name;
		},
		updateDistrict: function () {
			for (var i in this.cityArr) {
				var obj = this.cityArr[i];
				if (obj.name == this.city) {
					this.districtArr = obj.sub;
					break;
				}
			}
			if(this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) {
				this.district = this.districtArr[1].name;
			} else {
				this.district = '';
			}
		}
	},
	beforeMount: function () {
		this.updateCity();
		this.updateDistrict();
	},
	watch: {
		prov: function () {
			this.updateCity();
			this.updateDistrict();
		},
		city: function () {
			this.updateDistrict();
		},
		district(){
			var _this = this
			this.$emit("dizhigaibian",{prov:_this.prov,city:_this.city,district:_this.district})
		}
	}
}
</script>
